<template>
  <div class="slider-list">
    <template v-if="data && data.length > 0">
      <template v-if="isList">
        <div v-for="(slider, index) in data" :key="index" class="slider-item"
             :class="[{active: slider[props.key] === activeKey}]" @click="listChange(slider)">
          {{ slider[props.label] }}
        </div>
      </template>
      <template v-else-if="isCollapse">
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item v-for="(slider, index) in data" :key="index" :title="slider[props.label]"
                            :name="slider[props.key]">
            <template v-if="slider[props.children]">
              <div v-for="(child, index) in slider[props.children]" :key="index" class="slider-item"
                   :class="[{active: child[props.key] === activeKey}]" @click="listChange(child)">
                {{ child[props.label] }}
              </div>
            </template>
            <template v-else>
              <div class="slider-item slider-item__nodata">没有数据</div>
            </template>
          </el-collapse-item>
        </el-collapse>
      </template>
      <template v-else-if="isTree">
        <el-tree
            :data="data"
            :props="props"
            accordion
            @node-click="handleNodeClick">
        </el-tree>
      </template>
    </template>
    <template v-else>
      <div class="slider-item slider-item__nodata">没有数据</div>
    </template>
  </div>
</template>

<script>
export default {
  name: "SliderItem",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    // 键值对
    props: {
      type: Object,
      default: () => {
        return {label: "label", key: "key", children: "children"}
      }
    },
    // 其否默认选择一项（第一项）
    isDefaultSelect: {
      type: Boolean,
      default: true,
    },
    // 类型
    sliderType: {
      type: String,
      default: "list", // collapse, tree
    },
    // 默认选择值
    defaultValue: {
      type: [Array, Object],
      default: () => [],
    },
  },
  emits: ["change"],
  data() {
    return {
      activeKey: "",
      activeName: "",
      activeTreeKey: [],
    }
  },
  watch: {
    data: {
      handler: (list) => {
        this.defaultSelect(list)
      }
    },
    defaultValue(val) {
      if (this.data) {
        this.defaultSelect(this.data, val)
      }
    }
  },
  computed: {
    isList() {
      return this.sliderType === "list"
    },
    isCollapse() {
      return this.sliderType === "collapse"
    },
    isTree() {
      return this.sliderType === "tree"
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.defaultSelect(this.data);
    });
  },
  methods: {
    defaultSelect(list, selectedValue = this.defaultValue) {
      if (this.isList) {
        if (list && list.length > 0) {
          this.listChange(list[0]);
        }
      } else if (this.isCollapse) {
        if (list && list.length > 0) {
          if (selectedValue && Array.isArray(selectedValue) && selectedValue.length === 2) {
            for (let slider of list) {
              if (slider[this.props.key] === selectedValue[0]) {
                this.activeName = slider[this.props.key];
                const children = slider[this.props.children];
                if (children) {
                  for (let child of children) {
                    if (child[this.props.key] === selectedValue[1]) {
                      this.listChange(child);
                      break;
                    }
                  }
                }
                break;
              }
            }
          } else {
            const slider = list[0];
            this.activeName = slider[this.props.key];
            const children = slider[this.props.children];
            if (children) {
              this.listChange(children[0]);
            }
          }
        }
      } else if (this.isTree) {
        if (list && list.length > 0) {
          const slider = list[0];
          this.activeName = slider[this.props.key];
          const children = slider[this.props.children];
          if (children) {
            // this.activeTreeKey = [children[0][this.props.key]];
          }
        }
      }
    },
    listChange(item) {
      this.activeKey = item[this.props.key];
      if (this.isList) {
        this.notify(item)
      } else if (this.isCollapse) {
        this.notify([this.activeName, this.activeKey])
      }
    },
    handleNodeClick(data) {
    },
    notify(data) {
      this.$emit("change", data)
    },
  }
}
</script>

<style scoped lang="scss">
.slider-list {
  cursor: pointer;
  color: #333;
  height: 100%;
  overflow-y: auto;

  .slider-item {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0px 6px;

    &:hover {
      background: rgba(30, 159, 255, .7);
      color: white;
    }

    &.active {
      background: #1e9fff;
      color: white;
    }

    &__nodata {
      color: #808695;
      justify-content: center;
      cursor: default;

      &:hover {
        background: none;
        color: #808695;
      }
    }
  }
}
</style>
